<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户详情</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/selectY/selectY.css" />
	<link rel="stylesheet" href="/static/plugins/webuploader/webuploader.css"/>
	<link rel="stylesheet" href="/static/plugins/city-picker/city-picker.css"/>
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.image-container{
		    margin-left: 0px;
		}
		.image-list .item{
			width: 130px;
		}

	</style>	
</head>
<body class="body-container">
	<div class="next-nav-menu">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">个人信息</li>
		    <!-- <li>公司信息</li> -->
		  </ul>
		  <div class="layui-tab-content"></div>
		</div>   
	</div>   

	<fieldset class="layui-elem-field layui-field-title">
		<legend>基础信息</legend>
	</fieldset>		
	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label zdy-required">昵称</label>
	    <div class="layui-input-inline" style="width: unset;">
	      <input type="text" name="nickname" lay-verify="required" autocomplete="off" class="layui-input zdy-i-w800" maxlength="10" th:value="${newUser.nickname}">
	    </div>
	  	<div class="layui-form-mid layui-word-aux">
	  		<span>0 / </span>		
	    	<span class="nickname-length"> 10</span>
	  	</div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label zdy-required">手机号</label>
	    <div class="layui-input-inline" style="width: unset;">		
	      <input type="text" lay-verify="required" autocomplete="off" class="layui-input zdy-i-w800" maxlength="11" disabled="disabled" th:value="${newUser.phone}">
	    </div>		
	    <div class="layui-form-mid layui-word-aux">
	    	<span>禁止修改</span>	
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">性别</label>
	    <div class="layui-input-block">
	      <input type="radio" name="gender" value="男" title="男" checked>
	      <input type="radio" name="gender" value="女" title="女">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label zdy-required">省市区</label>
	    <div class="layui-input-inline">		
	     	<div class="city-picker-area area">  
                <input id="city-picker1" class="form-control" style="display: none" readonly type="hidden" name="region" data-toggle="city-picker">
            </div>
	    </div>	
	  </div>
	  
	  <div class="layui-form-item layui-form-text">
		<label class="layui-form-label">详细地址</label>
		<div class="layui-input-inline">							
			<input type="text" name="address" lay-verify="required" autocomplete="off" class="layui-input zdy-i-w800" maxlength="11">
		</div>	
	  </div>	
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">头像</label>
	    <div class="layui-input-inline">	
			<div class="image-container">
	  		<ul class="image-list">
		  		<li class="item">
		  			<div class="img-title mian">120 * 100</div>
		  			<div class="image-card image-sort1">
		  				<div id="fileList" class="uploader-list"></div>	
	         			<div class="wb-file-pickers" image-sort="1"></div>	
		  			</div>		
		  			<div class="image-tools image-sort1">		
		  			</div>
		  		</li>
	  		</ul>
	    </div>	
	    <div class="layui-form-mid layui-word-aux">
	    	<span>点击图片 可预览大图</span>	
	    </div>	
	  </div>
	  
	  <div class="layui-form-item" style="margin-bottom: 150px;"></div>	
    </form>	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>		
	<script type="text/javascript" src="/static/plugins/webuploader/webuploader.js"></script>
	<script type="text/javascript" src="/static/plugins/city-picker/city-picker.data.min.js"></script>
	<script type="text/javascript" src="/static/plugins/city-picker/city-picker.min.js"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script th:inline="javascript">		
		$(document).ready(function() {
			var file_service_location_val = [[${file_service_location}]];
			var newUser = [[${newUser}]];
			var userPictureUrl= newUser.pictureUrl;
			if(userPictureUrl){
				// 显示用户头像
				$(".image-container .image-card.image-sort1").empty().append('<img class="picture-preview-btn" alt="url" src="'+file_service_location_val+userPictureUrl+'">');
				// 显示删除							
				var html2 = '<i class="layui-icon layui-icon-delete del-product-image" file-number="'+userPictureUrl+'" image-sort=1></i>';
				$(".image-container .image-tools.image-sort1").empty().append(html2);		
			} 
			
			// 昵称长度
			$(".nickname-length").text($("input[name='nickname']").val().length);	
				
			$('.layui-input-inline input[name="nickname"]').bind('input propertychange', function() {
	        	var length = $(this).val().length;	
	        	$(".nickname-length").text(length);
			});	
			initWebUploader();
		})
				
		// 初始化 图片文件上传 webUploaderObj
	    var webUploaderObj = null;
	    function initWebUploader() {		
	    		// 初始化Web Uploader	 	  
		        webUploaderObj = WebUploader.create({
		        auto: true,							// 选完文件后，是否自动上传。
		        // swf文件路径
		        swf: './../static/plugins/webuploader/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/userPictureImage',
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '.wb-file-pickers',    
		        // 只允许选择图片文件。
		        accept: {
		            title: 'Images',
		            extensions: 'gif,jpg,jpeg,bmp,png',
		            mimeTypes: 'image/*'
		        },  			
		        fileVal:"file", 						// [默认值：'file'] 设置文件上传域的name。  
		        fileNumLimit: 1, 						//限制上传个数
		        fileSingleSizeLimit: 2048000, 			//限制单个上传图片的大小
		        compress: false, 						//webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图
				chunked: false, 						//是否要分片处理大文件上传  
				duplicate: false, 						//是否支持重复上传 	 
				fileSizeLimit: 1 * 1024 * 1024 			// 2000 * 1024 * 1024 最大2GB   
				//chunkSize:2*1024*1024, 				//分片上传，每片2M，默认是5M
		    });
		 	// 验证文件格式以及文件大小 
			webUploaderObj.on("error", function (type,file) {
				if (type == "Q_TYPE_DENIED") {
					layer.msg("文件格式不支持");
				} else if (type == "Q_EXCEED_SIZE_LIMIT") {
					layer.msg("文件大小不能超过200M");
				}else if(type == "Q_EXCEED_NUM_LIMIT"){
					layer.msg("超过每次上传数量图片限制");
				}else if(type == "F_DUPLICATE"){
					layer.msg("文件重复");  
				} else {         
					layer.msg("上传出错！错误代码"+type);
				} 
			});     
			// 上传前验证   
			webUploaderObj.on('beforeFileQueued', function (file) {
				
			});
			// 当有文件添加进来的时候
		    webUploaderObj.on( 'fileQueued', function( file , req) {

		    });
			// 文件上传前处理请求参数   
			webUploaderObj.on('uploadBeforeSend', function (obj, data) {
				//传入表单参数 		  	       	
			});     
		    // 文件上传过程中创建进度条实时显示。
		    webUploaderObj.on( 'uploadProgress', function( file, percentage ) {
		
		    });
		    // 文件上传成功
		    webUploaderObj.on( 'uploadSuccess', function( file ,res) {
		    	if(res.code==200){		
					if(res.dataObject){
						// parent.document.getElementById("userPictureUrl").setAttribute("setAttribute",res.dataObject.fileUrl);		
						// 显示上传图片								
						$(".image-container .image-card.image-sort1").empty().append('<img alt="url" src="'+res.dataObject.fileUrl+'">');
						// 显示删除					
						var html2 = '<i class="layui-icon layui-icon-delete del-product-image" file-number="'+res.dataObject.number+'" image-sort=1></i>';
						$(".image-container .image-tools.image-sort1").empty().append(html2);	
						layer.msg("上传成功");						
					}else{		
						layer.msg(res.msg);	
					}
				}else{
					layer.msg(res.msg);
				}	
				webUploaderObj.reset();		        
		    }); 
		 	// 上传失败回调
		    webUploaderObj.on( 'uploadError', function( file ) {
					
		    });
		 	// 不管上传成功还是失败都会执行
		    webUploaderObj.on( 'uploadComplete', function( file ) {
		    			
		    });	
	    }
	    
	 	// 删用户图片
	 	$(document).on('click', '.del-product-image', function () {	
			layer.confirm('确定删除图片吗？', {
				btn: ['确定', '取消']		//按钮
			}, function (index) {
				$.ajax({	    
			        url: '/sysUser/deleteUserPicture',  		// 请求的url地址	
			        dataType: 'json', 					        // 返回格式为json	
			        data: {},                             
			        type: 'post', 						        // 请求方式		
			        success: function (res) {
			           if(res.code==200){		
				        	layer.close(index);		
				        	// 显示上传按钮	
							$(".image-container .image-card.image-sort1").empty().append('<div id="fileList" class="uploader-list "></div><div class="wb-file-pickers" image-sort=1></div>');
							// 清空删除					
							$(".image-container .image-tools.image-sort1").empty().append("");	
							initWebUploader();			
							//webUploaderObj.reset();				
							$(".webuploader-pick").css("padding","initial");
							
							//parent.document.getElementById("userPictureUrl").setAttribute("setAttribute","");
			           }else{
			        	   layer.msg(res.msg);	
			           }
			        },
			        error: function () {

			        }	    
			    });
			});
		});
	</script>
</body>
</html>